<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/css/login.css}"/><!--tomcat情况-->
    <link href="../../../static/css/login.css" rel="stylesheet"><!--非tomcat情况-->
    <link rel="stylesheet" th:href="@{/static/css/inputLine.css}"/>
    <link href="../../../static/css/inputLine.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <div class="left-container">
        <div class="title"><span>登录</span></div>
        <form class="input-container" id="form">
            <label>
                <span>用户名: </span>
                <input id="username" placeholder="请输入用户名" type="text">
            </label>
            <label>
                <span>密 码: </span>
                <input id="password" placeholder="请输入密码" type="password">
            </label>
            <label>
                <button id="submit" type="submit">提交</button>
            </label>
        </form>
        <div class="send-container">
            <div class="action-container">
            </div>
        </div>
    </div>
    <div class="right-container">
        <div class="register-container">
            <a class="register" id="register" th:href="@{/register}">注册</a>
        </div>
    </div>
</div>
</body>
</html>
<script th:src="@{/static/js/anime.min.js}"></script>
<script th:src="@{/static/js/index.js}"></script>
<script th:src="@{/static/lib/jquery/jquery-3.7.1.min.js}"></script>
<script th:src="@{/static/lib/layer/layer.js}"></script>
<script>
    $("#submit").click(
        function (event) {
            event.preventDefault();
            var username = $("#username").val();
            var password = $("#password").val();
            if (username == "" || password == "") {
                layer.msg("用户名或密码为空", {icon: 2, time: 1000});
                return;
            }
            const submitData = {
                "username": username,
                "password": password
            };
            console.log("username: " + username + "  password: " + password);
            // 通过ajax向后台发送请求及响应
            console.log(username + ", " + password);
            console.log("[[@{/}]]");
            $('#form')[0].reset();
            $.ajax({
                url: "[[@{/}]]doLogin",
                type: "post",
                // 对表单数据对象序列化
                data: JSON.stringify(submitData),
                // 发送数据的格式和编码
                contentType: "application/json; charset=utf-8",
                // 返回值的类型
                dataType: "json",
                // 回调函数
                success: function (data) {
                    console.log(data.code + ", " + data.msg);
                    if (data.code === 200) {
                        // 登录成功，则跳转
                        layer.msg(data.msg,
                            {
                                icon: 1, time: 800
                            }, function () {
                                // 跳转到后台主页
                                window.location.href = "[[@{/}]]show";
                            }
                        )
                    } else {
                        layer.msg(data.msg, {icon: 2, time: 2000})
                    }


                },
                error: function (data) {
                    layer.msg(data.msg, {icon: 1, time: 800});
                }
            })

        }
    );
</script>